<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="service-search">
            <div class="service-query">
                <a-form-item>
                    <a-input placeholder="请输入服务号、服务号名称" v-decorator="['s_name']"/>
                </a-form-item>
                <a-form-item>
                    <a-select allowClear v-decorator="['cost']" placeholder="花费">
                        <a-select-option value="1">一万以下</a-select-option>
                        <a-select-option value="0">一万以上</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select allowClear v-decorator="['amount']" placeholder="余额">
                        <a-select-option value="1">一万以下</a-select-option>
                        <a-select-option value="0">一万以上</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select allowClear v-decorator="['status']" placeholder="服务号状态">
                        <a-select-option value="1">可用</a-select-option>
                        <a-select-option value="0">停用</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">
                        筛选
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" icon="plus" v-if="menu_role.includes('/service/create')" @click="showCreate">新增服务号</a-button>
                </a-form-item>
            </div>
        </a-form>
        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" :pageSize="pageSize"
                 bordered>
            <span slot="action" slot-scope="text, record">
                <router-link :to="'/service/update/'+record.id" v-if="menu_role.includes('/service/update')"><img src="./../../assets/images/view.svg"
                                                                     alt=""></router-link>
                <!--<a href="#"  v-if="menu_role.includes('/service/delete')" type="danger" @click.stop.prevent="showModal(record)" class="delete-image"><img
                        src="./../../assets/images/delete.svg" alt=""></a>-->
            </span>
        </a-table>
        <a-modal v-model="showcreate" title="新增服务号" @ok="createSubmit" @cancel="cancel"
             :cancelButtonProps="{ props: {type: 'primary'}}"
             centered
             width = '600px'
             :keyboard = 'false'
             okText = '确认'
             :maskClosable = 'false'>
            <create  @getList="getList"  @hideCreate="hideCreate" ref="create" @toRegisteredStep="val => {this.showcreate = val}"></create>
        </a-modal>
        <a-modal
            v-model='show_delete'
            title='删除账号'
            @ok = 'handleDelete'
            width="450px"
            :cancelButtonProps="{ props: {type: 'primary'}}"
            centered
            :keyboard = 'false'
            okText = '删除'
            :maskClosable = 'false'
        >
            <div class="confirm-delete-wrapper">
                <p>是否删除此账号？</p>
            </div>
        </a-modal>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import Create from './create'
    export default {
        components: {Create},
        data() {
            return {
                pageSize: 10,
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                columns: [
                    {title: '服务号', dataIndex: 'sn', align: 'center', width: '20%'},
                    {title: '服务号名称', dataIndex: 'name', align: 'center', width: '15%'},
                    {title: '客户账号', dataIndex: 'username', align: 'center', width: '15%'},
                    {title: '花费(积分)', dataIndex: 'cost', align: 'center', width: '15%'},
                    {title: '余额(积分)', dataIndex: 'amount', align: 'center', width: '15%'},
                    {title: '服务号状态', dataIndex: 'status', align: 'center', width: '10%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center', width: '10%'},
                ],
                form: this.$form.createForm(this),
                showcreate: false,
                show_delete: false,
                deleteRow: {},

            }

        },
        mounted() {
            this.getList();

        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http('get', 'service/index', Object.assign(req, param));
                this.tableData = data.data;
                this.pagination.total = data.total_count;
            },
            onSubmit() {//搜索提交
                this.form.validateFields((err, values) => {
                    values.name = values.s_name
                    if (values.s_name) {
                        delete values.s_name
                    }
                    if (!err) {
                        this.pagination.current = 1
                        this.getList(values)
                    }
                })
            },
            showModal(row) {
                this.show_delete = true;
                this.deleteRow = row;
            },
            cancel() {
                this.$refs.create.form.resetFields();
                this.storeServiceInfo({})
            },
            showCreate() {
                this.showcreate = true;
            },
            hideCreate() {
                this.showcreate = false;
            },

            createSubmit() {
                //新增提交
                this.$refs.create.onSubmit()

            },
            handleChange(page, size) {
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList()
            },
            handleDelete() {
                let that = this;
                let row = this.deleteRow;

                that.deleteData(row.id).then(res => {
                    if (res.status == "success") {
                        that.$message.success("删除成功!");
                        that.getList();
                    } else {
                        that.$message.error("删除失败!");
                    }
                    this.show_delete = false;
                });
            },
            async deleteData(id) {
                let data = await this.http('delete', 'service/delete', {id: id});
                return data;
            },
            ...mapActions([
                'storeServiceInfo'
            ])
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    #service-search {
        .ant-input {
            width: 200px;
        }

        .ant-select {
            width: 150px;
        }
    }

    .confirm-delete-wrapper {
        width: 100%;
        padding: 20px;
        text-align: center;
        p {
            font-size: 16px;
        }
    }

    .service-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }

</style>
